<script lang="ts" setup>
import { ref, h, reactive, onMounted,onBeforeMount } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton,VxeCheckbox,VxeImage } from "vxe-pc-ui";
import { projecttaskdtlList } from "@/api/project/project";
import {
  MerchantsInfoByTaxSourcesId,
} from "@/api/welcome";
import { useRoute } from "vue-router";
const route = useRoute();
const reVxeGridRef = ref();
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"))
onMounted(() => {
  getMerchantsInfoByTaxSourcesId(taxSourcesId);
});
interface RestaurantItem {
  id: number
  value: string
}
const listMerchantsInfoByTaxSourcesId = ref<RestaurantItem[]>([]);
const getMerchantsInfoByTaxSourcesId = (taxSourcesId?:
  number): void => {
  MerchantsInfoByTaxSourcesId(taxSourcesId).then((res: any) => {
    listMerchantsInfoByTaxSourcesId.value = res.data;
  });
};
// 根据税源地ID查询合作公司列表搜索
const fetchSuggestions = (queryString: any, cb: (params: any) => void) => { 
  const results = queryString
    ? listMerchantsInfoByTaxSourcesId.value.filter(createFilter(queryString))
    : listMerchantsInfoByTaxSourcesId.value  
    cb(results)
  
};
const createFilter = (queryString: string) => {
  return (listMerchantsInfoByTaxSourcesId: RestaurantItem) => {
    return (
      listMerchantsInfoByTaxSourcesId.value.indexOf(queryString) === 0
    )
  }
}
const autoselect = (res: any) => {
  console.log(res);
  formOptions.data.merchantsName = res.value;
};
const columns: VxeGridPropTypes.Columns<any> = [
  {
    title: "自由者姓名",
    field: "averageUserName",
    align: "center",
    minWidth: 100,
    showOverflow: true
  },
  {
    title: "合作公司",
    field: "merchantsName",
    align: "center",
    minWidth: 100,
    showOverflow: true
  },
  {
    title: "项目名称",
    field: "projectName",
    align: "center",
    minWidth: 100,    
  },
  {
    title: "单次费用",
    field: "estimatedCost",
    align: "center",
    minWidth: 60,    
  },
  {
    title: "服务数量",
    field: "serviceTimes",
    align: "center",
    minWidth: 60,    
  },
  {
    title: "收入金额",
    field: "actualCost",
    align: "center",
    minWidth: 60,    
  },
  {
    title: "任务状态",
    field: "stateDisplay",
    align: "center",
    minWidth: 60,    
  },{
    title: "接包时间",
    field: "createTime",
    align: "center",
    minWidth: 100,    
  }  
   
];
// 筛选相关
const formRef = ref();
interface FormDataVO {
  averageUserName: string;//公司名称
  taxSourcesId: number | string; // 税源地 
  projectTaskId: number | string;
  merchantsId: number | string;
  createTimeStart: "",
    createTimeEnd: "",
    timeRang: [],
  
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    averageUserName: '',
    projectTaskId: route.query.id,
    merchantsId: route.query.merchantsId,
    taxSourcesId: taxSourcesId, 
    createTimeStart: "",
    createTimeEnd: "",
    timeRang: [],  
  },
  items: [
    {
      field: "averageUserName",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "averageUserName" }
    }, 
    {
      field: "merchantsName",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "merchantsName" }
    },  
    {
      field: "timeRang",
      title: "",
      span: 6,
      itemRender: {},
      slots: { default: "timeRang" }
    },   
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});
// 重置内容
const handleInitialFormParams = () => {
  formOptions.data = <FormDataVO>{
    taxSourcesId: '',
    projectTaskId:"",
    merchantsId:"",
    averageUserName: '',
    createTimeStart: "",
    createTimeEnd: "",
    timeRang: [],
  };
};
const handleSearch = () => {
  if (formOptions.data?.timeRang?.length) {
    formOptions.data.createTimeStart = formOptions.data.timeRang[0];
    formOptions.data.createTimeEnd = formOptions.data.timeRang[1];
    // delete formOptions.data.timeRang;
  }
  reVxeGridRef.value.loadData();
};
const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};

const handleView = (record: Recordable) => {
  
};
const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};


</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form ref="formRef" v-bind="formOptions">
        <template #merchantsName="{ data }">
          <el-autocomplete
            clearable
            v-model="data.merchantsName"
            :fetch-suggestions="fetchSuggestions"
            placeholder="请输入公司名称"
            value-key="value"
            @select="autoselect"
          >
          </el-autocomplete>
        </template> 
        <template #averageUserName="{ data }">
          <el-input
            clearable
            placeholder="自由者姓名"
            v-model="data.averageUserName"
          ></el-input>
        </template>
        <template #timeRang="{ data }">
          <el-date-picker
            clearable
            style="width: 100%"
            v-model="data.timeRang"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </template>        
        <template #active>
          <el-button @click="handleSearch" native-type="submit" type="primary"
            >搜索</el-button
          >
          <el-button @click="handleReset" native-type="reset">重置</el-button>          
        </template>
      </vxe-form>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="projecttaskdtlList"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleView="handleView"
      />
    </el-card>
  </div>
</template>
<style>
</style>
